import { Button, Modal, Input, message } from "antd";
import React, { useState, useRef, useEffect } from "react";
export default function Ji() {
  const h = window.innerHeight;
  const w = window.innerWidth;
  let [Jis, setJis] = useState([]);
  const [Ji, setJi] = useState(Jis.length - 1);
  const [isRunning, setIsRunning] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const AddJis = (value) => {
    if (value.trim() === "" || !value) {
      message.info("不能为空");
      return;
    }
    if (Jis.includes(value.trim())) {
      message.info("重复了");
      return;
    }
    Jis.push(value.trim());
    setJis([...Jis]);
  };
  const DelJis = (index) => {
    Jis.splice(index, 1);
    setJis([...Jis]);
  };
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const batchAdd = (value) => {
    if (value.trim() === "" || !value) {
      message.info("不能为空");
      return;
    }
    let str = value;
    str = str.replace(/\s/g, "");
    let regex = /\(([^)]+)\)/g;
    let matches = str.match(regex);
    let arr = matches.map((match) => match.slice(1, -1).trim());
   const result= Array.from(new Set(arr))
    Jis = [...Jis, ...result];
    setJis(Jis);
  };
  const intervalRef = useRef(null);
  const chouka = () => {
    setJi(Math.floor(Math.random() * Jis.length));
  };
  const toggleInterval = () => {
    if (!isRunning) {
      if (Jis.length === 0) {
        message.info("没有技你开个屁");
        return;
      }
      if (Jis.length === 1) {
        message.info("只有一个技咱就不用抽了吧");
        return;
      }
      intervalRef.current = setInterval(chouka, 50);
      setIsRunning(true);
    } else {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
      setIsRunning(false);
    }
  };
  useEffect(() => {
    console.log(h, w);
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);
  return (
    <div
      style={{
        height: h,
        width: w,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    >
      <Modal
        title="技池"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <div style={{ overflow: "auto" }}>
          <Input.Search
            enterButton="批量添加"
            style={{ marginBottom: 8 }}
            onSearch={batchAdd}
          ></Input.Search>
          <div>批量添加模板：(副歌技1)(副歌技2)(副歌技3)</div>
          <Button
            onClick={() => {
              setJis([]);
            }}
            type="link"
          >
            清空
          </Button>
          <Button
            onClick={async () => {
              try {
                const textToCopy = "(副歌技1)(副歌技2)(副歌技3)";
                await navigator.clipboard.writeText(textToCopy);
                alert("(副歌技1)(副歌技2)(副歌技3)");
              } catch (err) {
                console.error("无法复制文本: ", err);
              }
            }}
            type="link"
          >
            批量添加模板
          </Button>
          <div>
            {" "}
            {Jis.length
              ? Jis.map((item, index) => (
                  <div
                    style={{
                      display: "inline-block",
                      padding: 4,
                      width: "fit-content",
                      borderRadius: 4,
                      border: "1px solid #d9d9d9",
                    }}
                  >
                    {item}{" "}
                    <Button
                      onClick={() => {
                        DelJis(index);
                      }}
                    >
                      X
                    </Button>
                  </div>
                ))
              : "无"}
          </div>

          <Input.Search
            allowClear
            enterButton="添加"
            style={{ marginBottom: 8, width: 240 }}
            onSearch={(value) => AddJis(value)}
          ></Input.Search>
        </div>
      </Modal>
      <div style={{ fontSize: 18, fontWeight: "bold", marginBottom: 32 }}>
        {Jis[Ji] ? Jis[Ji] : "无"}
      </div>
      <Button onClick={toggleInterval}>
        {!isRunning ? "随机开始" : "停止"}
      </Button>
      <Button onClick={showModal} style={{marginTop:32}}>技池</Button>
    </div>
  );
}
